<template>
    <view class="page">
		<view class="popup-cont">
			<view class="g-order-deital">
				<view class="d-title">订单明细:</view>
				<view class="item">
					<view class="order-deital">
						<view class="fex" v-for="(item,index) in totalData " :key="index">
							<text class="name">{{item.name}}：</text>
							<text class="text">{{item.value}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="g-handle-deital">
				<view class="d-title">津贴明细:</view>
				<view class="g-container g-nav-title">
					<view class="w30">日期</view>
					<view class="w20">金珠克数</view>
					<view class="w30">津贴</view>
					<view class="w20 handle">状态</view>
				</view>
				<view class="g-popup-content">
					<view class="g-container g-line" v-for="(item,index) in lotteryData" :key="index">
						<view class="w30">{{item.date}}</view>
						<view class="w20" :style="{color: '#d61311'}">{{item.gam_number}}</view>
						<view class="w30">￥{{item.allowance}}</view>
						<view class="w20 handle">{{item.result_text}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="m-full-loading" v-if="showloading">
			<image src="../../static/images/loading.gif" mode="widthFix"></image>
		</view>
    </view>
</template>
<script>
    import henglang from '@/common/common.js';
    export default {
        data() {
            return {
				totalData: [],
			    showloading: false,
				lotteryData:[]
            };  
        },
        methods: {
           
        },
        onLoad({
			order_id
		}) {
			let that = this
			that.showloading = true;
			henglang.get('order/termOrderDeital',{order_id: order_id},true,function(res){
				that.showloading = false;
				that.totalData = res.data.data.order_deital;
				that.lotteryData = res.data.data.order_operation;
			});
        }
    }
</script>

<style>
	.page{
		background: #ffffff;
	}
	.popup-cont{
		font-size: 30upx;
		width: 700upx;
		margin: 0 auto;
	}
	.popup-cont .d-title{
		width: 100%;
		color: #d71511;
		font-weight: bold;
		position: relative;
		padding: 10upx 0;
		padding-left: 30upx;
	}
	.popup-cont .d-title:after{
		content: '';
		position: absolute;
		left: 0upx;
		top: 50%;
		margin-top: -15upx;
		width: 6upx;
		height: 30upx;
		background: #d71511;
	}
	.g-nav-title{
		line-height: 50upx;
		width: 100%;
	}
	.g-container {
	    display: flex;
		text-align: center;
		align-items: center;
	}
	.g-container .w20 {
		width: 20%;
	}
	.g-container .w30{
		width: 30%;
	}
	.g-container .handle{
		color: #707070;
	}
	.popup-cont .u-arrow {
	    display: inline-block;
	    border: 10upx solid;
	    border-color: #707070 transparent transparent transparent;
	    transform: translate(54%,26%);
	}
	.popup-cont .g-line {
		border-bottom: 1px solid #f5f5f5;
	}
	.popup-cont .g-popup-content {
		width: 100%;
		margin-bottom: 20upx;
	}
	.popup-cont .g-popup-content .g-container{
		height: 100upx;
	}
	.popup-cont .g-buy-detail {
		margin-bottom: 20upx;
	}
	.popup-cont .g-detail-left {
		display: inline-block;
		font-size: 28upx;
		width: 230upx;
		position: relative;
	}
	.popup-cont .g-detail-left.b-right{
		padding-right: 40upx;
		padding-left: 20upx;
		margin: 0 40upx;
	}
	.popup-cont .g-detail-left.b-right:after{
		content: '';
		position: absolute;
		top: 50%;
		right: 0;
		background: #DCDCDC;
		width: 1px;
		height: 84upx;
		margin-top: -42upx;
	}
	.popup-cont .g-detail-left view{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10upx 0;
	}
	.g-order-deital{
		background: #ffffff;
		width: 100%;
		padding: 20upx 0;
	}
	.g-order-deital .item{
		background: #ffffff;
		border-radius: 3px;
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		padding: 20upx;
		margin-top: 20upx;
	}
	.g-order-deital .order-title{
		color: #333333;
		padding: 10upx 0;
		padding-left: 30upx;
	}
	.g-order-deital .price{
		color: #D71511;
		font-size: 36upx;
		font-weight: bold;
	}
	.g-order-deital .fex{
		padding: 5upx 0;
	}
	.g-order-deital .order-deital{
		padding-left: 30upx;
	}
	.g-frozen-info{
		padding-bottom: 20upx;
	}
	.g-frozen-info .info{
		display: flex;
		justify-content: space-between;
		margin-top: 10upx;
		padding-left: 30upx;
	}
	.g-frozen-info .info .num{
		font-weight: bold;
		color: #D71511;
		margin-right: 10upx;
	}
	.g-frozen-info .info .time{
		color: #828080;
	}
	.g-frozen-info .content{
		color: #828080;
		margin-left: 30upx;
		border-bottom: 1px dashed #cccccc;
		padding-bottom: 10upx;
	}
	.g-frozen-info .item{
		padding: 10upx 0;
	}
	.g-frozen-info .state{
		color: #000000;
	}
</style>
